<template>
	<view class="page-detail">
		<!--轮播图-->
		<view class="swiper">
			<swiper :indicator-dots="indicatorDots" :duration="1000" :autoplay="autoplay" :interval="3000">
				<swiper-item>
					<view class="swiper-item">
						<image class="swiper-img" src="../../static/index/banner1.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="swiper-img" src="../../static/index/banner2.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="swiper-img" src="../../static/index/banner3.jpg" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!--价格、名称、说明-->
		<view class="name-box">
			<view class="name">
				{{ pets[0].goodsName }}
			</view>
			<view class="action-box">
				<view class="price-box">
					<view class="price">
						<view class="discounted-price">
							￥{{ pets[0].price }}
						</view>
						<view class="original-price">
							￥2008
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="other-box">
				<view class="services">
					<text class="tit">服务&nbsp&nbsp</text>
					<text class="content">30天保障·终身售后·赠送礼包</text>
				</view>
				<view class="line"></view>
				<view class="delivery">
					<text class="tit">配送&nbsp&nbsp</text>
					<text class="content">空运配送·汽运配送·买家自提</text>
				</view>
				<view class="line"></view>
			</view>
		</view>

		<!--商家信息-->
		<view class="business-information">
			<view class="tit">
				<view class="text">
					商家信息
				</view>
				<view class="more text-arrow">
					店铺
				</view>
			</view>
			<view class="content">
				<image class="img" src="../../static/images/business/002.png" mode=""></image>
				<view class="text1">
					{{seller[0].sellerName}}
				</view>
				<view class="text2">
					{{seller[0].address}}
				</view>
				<view class="text2">
					在售{{ pets[0].goodsSum }}只 | 好评49条 | 等级5星
				</view>
			</view>
		</view>

		<!--买家评价-->
		<view class="comments">
			<view class="tit">
				<view class="text">
					买家评价
				</view>
				<view class="more text-arrow">
					全部
				</view>
			</view>
			<view class="content">
				<view v-for="(rates, ratesIndex) in rates.slice(0,3)" :key="ratesIndex" class="addressInfo">
					<view class="item">
						<image class="img" src="../../static/images/business/002.png" mode=""></image>
						<view class="text1">
							{{rates.userName}}
						</view>
						<view class="text2">
							{{rates.rate}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--投诉举报-->
		<view class="report">
			<view class="tit">
				<view class="text">
					投诉举报
				</view>
				<view class="more text-arrow">
					举报
				</view>
			</view>
			<view class="content">
				<view class="text">
					若您遇到商家涉及服务态度、诚信、私下交易或其他不规范问题，请及时举报，平台核实后将依规处理！
				</view>
			</view>
		</view>
		<!--弹窗-->
		<view v-if="showModal" class="modal-overlay" @click="closeModal">
			<view class="modal-bottom" @click.stop>
				<!-- 弹窗内容 -->
				<view class="modal-header">
					<text>确认购买</text>
				</view>
				<view class="modal-body">

					<view class="address">
						<text @click="showAddressWindow">选择地址</text>
						<view class="">
							{{address[0].address}}{{ address[0].name }} {{ address[0].phone }}
						</view>
						<address-window ref="addressWindow" :addresses="Alladdress" @select="updateAddress"
							@close="hideAddressWindow"></address-window>
					</view>
					<view class="quantity">
						<text>购买数量：</text>
						<button class="decrease-button" @click="decreaseNum">-</button>
						<input v-model="num" type="number" min="1" />
						<button class="increase-button" @click="increaseNum">+</button>
					</view>
				</view>
				<view class="modal-footer">
					<button @click="confirmPurchase">确认</button>
					<button @click="closeModal">取消</button>
				</view>
			</view>
		</view>
		<!--底部-->
		<view class="footer">
			<view class="footer-item">
				<view class="image-container">
					<image class="icon" src="../../static/images/store.png"></image>
				</view>
				<view class="text">店铺</view>
			</view>
			<view class="footer-item">
				<view class="image-container">
					<image class="icon" src="../../static/images/customer.png"></image>
				</view>
				<view class="text">客服</view>
			</view>
			<view class="footer-item">
				<view class="image-container">
					<image class="icon" src="../../static/images/order.png"></image>
				</view>
				<view class="text">收藏</view>
				<view class="badge"></view>
			</view>
			<view class="footer-item action" @click="addCart()">
				加入购物车
			</view>
			<view class="footer-item action" @click="showModal = true">
				立即购买
			</view>
		</view>

		<!--瀑布流-->
		<view class="waterfall">
			<waterFall></waterFall>
		</view>
	</view>
</template>

<script>
	import axios from 'axios';
	import service from '../../utils/request.js';
	import waterfall from '../../components/waterFall/waterFall.vue';
	import AddressWindow from '@/components/AddreessWindow.vue'
	export default {
		data() {
			return {
				userID: localStorage.getItem("userID"),
				goodsID: null,
				sellerID: null,
				num: 1,
				quantity:1,
				price: null,
				pets: [],
				seller: [],
				rates: [],
				selectedAddress: '请选择地址', // 选中的地址
				addressOptions: [], // 地址选项
				address: {},
				Alladdress: {},
				showModal: false, // 控制弹窗显示
			};
		},
		components: {
			AddressWindow,
		},
		onLoad() {
			// 将 goodsID 转换为整数并保存到 data 中
			this.goodsID = uni.getStorageSync('goodsID');
			// 调用 getPetsData 方法时传递转换后的整数 goodsID
			this.getAddressData();
			this.getPetsData(this.goodsID);
			this.getPetsSellerData(this.goodsID);
			this.getRates(this.goodsID);
		},
		methods: {
			showAddressWindow() {
				this.$refs.addressWindow.show();
			},
			hideAddressWindow() {
				this.$refs.addressWindow.closeWindow();
			},
			updateAddress(selectedAddress) {
				this.address = [selectedAddress];
			},
			increaseNum() {
				this.num++;
			},
			decreaseNum() {
				if (this.num > 1) {
					this.num--;
				}
			},
			async getAddressData() {
				try {
					const response5 = await service.get('/address/list/' + this.userID);
					// 确保返回的数据是数组格式
					if (Array.isArray(response5.data)) {
						this.Alladdress = response5.data;
						// 检查是否存在默认地址
						const defaultAddress = this.Alladdress.find(address => address.isDefault === 1);
						if (defaultAddress) {
							this.address = [defaultAddress]; // 设置默认地址
							console.log('默认地址已设置:', defaultAddress);
						} else {
							console.log('没有找到默认地址');
						}
					} else {
						console.error('返回的数据不是数组格式');
					}
				} catch (error) {
					console.error('获取数据失败:', error);
				}
			},
			async getPetsData(goodsID) {
				try {
					// 确认 goodsID 的类型是整数
					const response = await service.get('/pets/list/' + goodsID);
					this.pets = response.data;
					this.price = this.pets[0].price;
					this.sellerID = this.pets[0].sellerID;
					console.log('获取的数据aaaaaaaaaaa:', response);
					console.log('cnm', this.addressOptions)
				} catch (error) {
					console.error('获取数据失败:', error);
				}
			},
			async getPetsSellerData(goodsID) {
				try {
					// 确认 goodsID 的类型是整数
					const response1 = await service.get('/seller/listSeller/' + goodsID);
					this.seller = response1.data;
					console.log('获取的数据sdsdasd:', this.seller);
					console.log('Received goodsID:', this.goodsID);
				} catch (error) {
					console.error('获取数据失败:', error);
					console.log('Received goodsID:', this.goodsID);
				}
			},
			async addCart() {
				try {
					const response = await service.post('/cart/add', {
						// 你的后端地址
						num: this.quantity,
						goodsID: this.goodsID,
						sellerID: this.sellerID,
						userID: localStorage.getItem("userID"),
						price: this.price,
						sellerID: this.sellerID
					});
					uni.showToast({
						title: '加入购物车成功',
						icon: 'success'
					});
				} catch (error) {
					uni.showToast({
						title: '加入购物车失败',
						icon: 'none'
					});
					console.error('插入失败:', error);
					console.log();
				}
			},
			async getRates(goodsID) {
				try {
					// 确认 goodsID 的类型是整数
					const response3 = await service.get('/rates/showRate',{
						params:{
							goodsID:this.goodsID
						}
					});
					this.rates = response3.data;
					console.log("sdadasdadas",response3);
				} catch (error) {
					console.log(response3);
					console.error('获取数据失败:', error);
					console.log('Received goodsID:', this.goodsID);
				}
			},
			// 关闭弹窗
			closeModal() {
				this.showModal = false;
			},
			// 选择地址
			onAddressChange(e) {
				this.selectedAddress = this.addressOptions[e.target.value];
			},
			// 确认购买
			async confirmPurchase() {
				try {
					const responese = await service.post('/order/createDirectly', {
						receiverName: this.address[0].name,
						receiverPhone: this.address[0].phone,
						receiverAddress: this.address[0].address,
						userID: this.userID,
						goodsID: this.goodsID,
						num: this.num
					});
					this.showModal = false; // 关闭弹窗
					uni.navigateTo({
						url: '/pages/order/order'
					});
				} catch (error) {
					console.error('创建订单失败:', error);
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	@use "detail";
</style>